<template>
    <draggable 
    :list="widgetList"
    item-key="id" 
    group="dragGroup"
    ghost-class="ghost"
    handle=".drag-handler"
    filter=".forbid"
    :force-fallback="true"
    chosen-class="chosenClass"
    animation="300"
    :fallback-class="true"
    :fallback-on-body="true"
    :touch-start-threshold="50"
    :fallback-tolerance="50"

    @start="onStart"
    @end="onEnd"
    @add="onAdd" 
    @update="onUpdate" 
    :move="onMove"
    >
        <template #item="{ element: widget, index }">
            <div class="transition-group-el">
            <template v-if="'container' === widget.category">
                <div></div>
            </template>
            <template v-else>
                <fieldWidget :data="widget"></fieldWidget>
            </template>
            </div>
        </template>
    </draggable>
</template>

<script setup lang="ts">
    /***基础组件引入***/
    import { reactive, ref, watch, onMounted, getCurrentInstance, toRefs } from 'vue'
    import draggable from "vuedraggable"

    import fieldWidget from './fieldWidget'
    //import fieldDrag  from './fieldDrag.vue'
    const state = reactive({
        widgetList: [
          {id:'1',type: 'button',category: 'container'  icon: 'grid', name:'栅格'},
          {id:'2',type: 'input',  icon: 'grid', name:'栅格'},
          {id:'3',type: 'select',  icon: 'grid', name:'栅格'}
        ]
    });
    const {
      widgetList
    }  = toRefs(state);

    //拖拽开始的事件
    const onStart = (origin) => {
       console.log("开始拖拽");
        console.log(origin);
    };

    //拖拽结束的事件
    const onEnd = () => {
       console.log("结束拖拽");
      
    };

    const onMove = (e, originalEvent) => {
        //不允许停靠
     //   if (e.relatedContext.element.disabledPark == true) return false;

        return true;
    };

</script>
<style lang="scss" scoped>
   /* 隐藏组件拖拽状态中显示的黑点 */
    :deep(li.container-widget-item), :deep(li.field-widget-item) {
      list-style: none;
    }
</style>
